<template>
  <div>
    <el-dialog :visible.sync="freezeDialog" title="申请冻结" width="25%" center>
      <div style="width: 100%;display: flex;flex-direction: column;align-items: center">
        <div class="pics"><span style="width: 70px">标 题：</span>
          <el-input size="small" style="width: 300px" v-model="data.title"></el-input>
        </div>
        <div class="pics"><span style="width: 70px">原 因：</span>
          <el-select size="small" style="width: 300px" v-model="data.reasonId">
            <el-option v-for="(item,index) in reasonList" :label="item.reasonName" :value="item.id"
                       :key="index"></el-option>
          </el-select>
        </div>
        <div class="pics"><span style="width: 70px">延期天数：</span>
          <el-input size="small" style="width: 300px" v-model="data.day" placeholder="请填写数字"></el-input>
        </div>
        <div class="pics"><span>图片：复制粘贴至此区域即可上传</span>
          <div style="display: flex;margin-top: 15px">
            <p v-for="(item,index) in picList" style="display: flex;flex-wrap: wrap;margin-right: 15px">
              <el-image :src="item" :key="index" style="width: 50px"
                        :preview-src-list="picList.map(img =>  img)"></el-image>
              <el-link style="font-size: 12px;text-decoration: underline" @click="_delete(index)">删除</el-link>
            </p>
          </div>
        </div>
      </div>
      <span slot="footer">
        <el-button type="primary" size="small" @click="freezeDialog=false">取 消</el-button>
        <el-button type="primary" size="small" @click="_comfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "freezeDialog",
  data() {
    return {
      freezeDialog: false,
      picList: [],
      reasonList: [],
      data: {
        assignTaskId: "",
      }
    }
  },
  created() {
    document.addEventListener('paste', this.handlePaste)
  },
  methods: {
    handleOpen(val) {
      this.freezeDialog = true
      this.data = this.$options.data().data;
      this.picList = this.$options.data().picList;
      this.data.assignTaskId = val.assignTaskId
      this.$api.frozenGetReason().then(res => {
        this.reasonList = res
      })
    },
    handlePaste(event) {
      if (!this.freezeDialog) return;
      const clipboardData = event.clipboardData || window.clipboardData;
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i];

          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile();
            if (file) {
              this.uploadImage(file);
            }
          } else {
            this.$message.error('请拷贝图片!');
            break;
          }
        }
      }
    },
    uploadImage(imageFile) {
      const formData = new FormData();
      formData.append('file', imageFile);
      axios.post(`${this.$apiHost}/img/fileImgUrl`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'token': window.$quinn.getStorage("tokenv3")
        }
      })
          .then(response => {
            this.picList.push('https://' + response.data.result[0]);
          })
          .catch(error => {
          });
    },
    _delete(i) {
      this.picList.splice(i, 1)
    },
    _comfirm() {
      const data = {
        ...this.data,
        img: this.picList.toString()
      }
      this.$api.frozenAddFrozen(data).then(res => {
        if (res == 1) {
          this.$message.success('提交成功！')
          this.freezeDialog = false
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.pics {
  margin-bottom: 15px;

  span {
    display: inline-block;
  }
}
</style>